<template>
  <div>
    <table align="center" width="900px" cellspacing="30">
      <tr>
        <td>标题</td>
        <td>
          <van-field v-model="title" />
        </td>
        <td>消息类型</td>
        <td>
          <el-select v-model="data2" placeholder="请选择消息类型">
            <el-option
                v-for="item in datas1"
                :key="item.value"
                :label="item.label"
                :value="item.label">
            </el-option>
          </el-select>
        </td>
      </tr>
      <tr>
        <td>开始时间</td>
        <td>
          <el-date-picker
              v-model="value1"
              type="date"
              value-format="YYYY-MM-DD"
              placeholder="请选择开始时间">
          </el-date-picker>
        </td>
        <td>结束时间</td>
        <td>
          <el-date-picker
              v-model="value2"
              type="date"
              value-format="YYYY-MM-DD"
              placeholder="请选择结束时间">
          </el-date-picker>
        </td>
      </tr>
      <tr>
        <td>优先级</td>
        <td>
          <el-select v-model="value" placeholder="请选择优先级">
            <el-option
                v-for="item in options"
                :key="item.value"
                :label="item.label"
                :value="item.label">
            </el-option>
          </el-select>
        </td>
        <td>通告类型</td>
        <td>
          <el-select v-model="valuetype" placeholder="请选择类型">
            <el-option
                v-for="item in datas"
                :key="item.value"
                :label="item.label"
                :value="item.value">
            </el-option>
          </el-select>
        </td>
      </tr>
      <tr v-if="valuetype=='1'">
        <td>
          选择用户
        </td>
        <td>
          <el-select
              v-model="uservalue"
              multiple
              filterable
              allow-create
              default-first-option
              placeholder="请选择用户">
            <el-option
                v-for="item in userlist"
                :key="item.id"
                :label="item.name"
                :value="item.id">
            </el-option>
          </el-select>
        </td>
      </tr>
      <tr>
        <td>内容</td>
        <td colspan="3">
          <el-input
              type="textarea"
              :rows="2"
              placeholder="请输入内容"
              v-model="textarea">
          </el-input>
        </td>
      </tr>
      <tr>
        <td colspan="4" align="center">
          <van-button @click="insertmsg">提交</van-button>
        </td>
      </tr>
    </table>
  </div>
</template>

<script>
import axios from 'axios'
export default {
  name:'message',
  data(){
    return{
      userlist:[],
      uservalue:[],
      title:'',
      data2:'',
      value1:'',
      value2:'',
      valuetype:'',
      datas:[{
        value: '1',
        label: '选择用户'
      }, {
        value: '2',
        label: '全体用户'
      }],
      options: [{
        value: '1',
        label: '高'
      }, {
        value: '2',
        label: '中'
      }, {
        value: '3',
        label: '低'
      }],
      value: '',
      textarea:'',
      datas1:[{
        value: '1',
        label: '通知公告'
      }, {
        value: '2',
        label: '系统消息'
      }],
    }

  },
  methods:{
    getuser(){
      axios.get('/userlist').then(res=>{
        console.log(res);
        this.userlist = res.data.list
      })
    },
    insertmsg(){
      let uservalue = JSON.stringify(this.uservalue)
      axios.post('/messageinsert',{'title':this.title,'text':this.textarea,'type':this.data2,
        'starttime':this.value1,'outtime':this.value2,'rank':this.value,'userlist':uservalue
      }).then(res=>{
        console.log(res);
      })
    }
  },
  mounted(){
    this.getuser()
  }
}
</script>

<style>

</style>
